<template>
<!-- 首页 -->
    <div class="home">
        <div class="root">
            <header class="page">
                <div>
                    <router-link to="/first">
                        <img src="../img/home/logo.png" alt="">
                    </router-link>                    
                </div>
                <div class="navdiv">
                    <router-link to="/first" tag="div" :class="{'active': curIndex === -2}">首页</router-link>
                    <div :class="{'active': curIndex === -1}">产品中心
                        <p>
                            <router-link to="/productOne" tag="span" >智能穿戴产品</router-link>
                            <router-link to="/productTwo" tag="span" >家厨净化产品</router-link>
                            <router-link to="/productThree" tag="span" >药食同源产品</router-link>
                        </p>                   
                    </div>
                    <router-link to="/health" tag="div" :class="{'active': curIndex === 0}">健康服务</router-link>
                    <router-link to="/coporation" tag="div" :class="{'active': curIndex === 1}">合作机构</router-link>
                    <router-link to="/about" tag="div" :class="{'active': curIndex === 2}">关于我们</router-link>                
                </div>
            </header>
        </div>             
        <router-view/>
        <footer>
            <div class="page">
                <div class="left">
                    <router-link to="/first">
                        <img src="../img/home/logo.png" alt="">
                    </router-link>                    
                    <ul>
                        <li>
                            <img src="../img/home/app.jpg" alt="">
                            <p>APP下载</p>
                        </li>
                        <li>
                            <img src="../img/home/erweima.jpg" alt="">
                            <p>体验二维码</p>
                        </li>
                        <li>
                            <img src="../img/home/erweima2.jpg" alt="">
                            <p>微信公众号</p>
                        </li>
                    </ul>
                </div>
                <div class="right">
                    <div>
                        <h4>产品中心</h4>
                        <p>智能穿戴产品</p>
                        <p>家厨净化产品</p>
                        <p>药食同源产品</p>
                    </div>
                    <div>
                        <h4>健康服务</h4>
                        <p>健康管理</p>
                        <p>医疗服务</p>
                        <p>体安健康中心</p>
                        <p>五行康养圣地</p>
                    </div>
                    <div>
                        <h4>关于我们</h4>
                        <p>企业简介</p>
                        <p>企业资讯</p>
                        <p>地理位置</p>
                        <p>客服热线</p>
                    </div>
                    <div>
                        <h4>合作机构</h4>
                        <p>中国研究型医院协会</p>
                        <p>广东省中药研究</p>
                        <p>北京同仁堂</p>
                    </div>
                    <span>400-020-7788 (工作时间：9:00-18:00)</span>
                </div>
            </div>
            <p>京ICP备11017824号-4</p>
        </footer>
    </div>
</template>

<script>
import Title from '../components/Title'

export default {
    data() {
        return {
        }
    },
    components:{
        Title
    },
    computed: {
        curIndex(){           
            switch(this.$route.path){
                case '/productOne': 
                    return -1;
                case '/productTwo': 
                    return -1;
                case '/productThree': 
                    return -1;
                case '/health': 
                    return 0;
                case '/coporation': 
                    return 1;
                case '/about': 
                    return 2;
                default:
                    return -2
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.root{
    background: #2a48b8;
}
header {
    display: flex;
    justify-content: space-between;
    height: 100px;
    align-items: center;    
    text-align: center;
    .navdiv{
        display: flex;
        color: #e3faff;
        position: relative;
        >div{
            width: 120px;
            cursor: pointer;
            height: 100px;
            line-height: 97px;
            position: relative;
            font-weight: 600;
            border-top: 3px solid #2a48b8; 
            transition: all .3s linear;
            &:hover{
                background: #142b71;
                border-top: 3px solid #5ffff1;           
            }
            p{
                display: none;
                width: 120px;
                text-align: center;
                background: rgba($color: #142b71, $alpha: 0.7);
                color: #333;
                padding: 10px 0;
                line-height: 28px;
                font-weight: 400;
                font-size: 14px;
                position: absolute;
                left: 0;
                top: 100%;
                z-index: 2;
                span{
                    display: block;
                    color: #fff;
                    &:hover{
                        color: #5ffff1;
                        
                    }
                }
            }
            &:nth-child(2):hover p{
                display: block;
            }           
        }
        .active{
                background: #142b71;
                border-top: 3px solid #5ffff1; 
            }
    }    
}
footer{
    background: #1c1c1c;
    padding-top: 100px;
    color: #bebebe;
    .left{
        ul{
            display: flex;
            text-align: center;
            padding-top: 50px;
            li+li{
                margin-left: 20px;
            }
            p{
                padding-top: 15px;
            }
        }
    }
    .page{
        display: flex;
        justify-content: space-between;
    }
    .right{
        position: relative;
        display: flex;
        padding-top: 50px;
        >div{
            width: 180px;
            text-align: center;
            h4{
                padding-bottom: 16px;
                font-weight: 600;
                color: #fff;
            }
            p{
                line-height: 30px;
                font-size: 14px;
                cursor: pointer;
                &:hover{
                    color: #fff;
                }
            }
        }
        >span{
            position: absolute;
            left: 50px;
            bottom: 30px;
            font-weight: 550;
            color: #fff;
        }
    }
    >p{
        text-align: center;
        padding: 40px 0;
    }
}
</style>
